Jassif Team Institution

CSS Accessibility Styling

ஒரு வலைத்தளம் அனைத்து பயனர்களுக்கும், குறிப்பாக ஊனமுற்றோருக்கும், நல்ல அணுகல்தன்மையை உறுதி செய்யும் வகையில் வடிவமைக்கப்பட வேண்டும்.

CSS அணுகல்தன்மை ஸ்டைலிங் என்பது காட்சி தெளிவு, வழிசெலுத்தல் மற்றும் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்த நல்ல ஸ்டைலிங் நுட்பங்களைப் பயன்படுத்துவது பற்றியது.

CSS அணுகல்தன்மை ஸ்டைலிங் நுட்பங்கள்

உங்கள் வலைத்தளத்தின் அணுகல்தன்மையை எவ்வாறு மேம்படுத்துவது என்பது குறித்த சில உதவிக்குறிப்புகள் மற்றும் நுட்பங்கள் இங்கே:

1. உயர் நிற தெளிவை வழங்கவும்

படிப்பதற்கான எளிமைக்காக எப்போதும் உரை மற்றும் பின்புலத்திற்கு இடையே நல்ல நிற தெளிவைப் பயன்படுத்தவும். இது குறிப்பாக பார்வைக் குறைபாடுகள் அல்லது நிற குருட்டுத்தன்மை உள்ள பயனர்களுக்கு முக்கியமானது.

body {
  background-color: #ffffff;
  color: #000000;
}

body {
  background-color: #eeeeee;
  color: #cccccc;
}

2. நல்ல எழுத்துரு, எழுத்துரு அளவு மற்றும் வரி உயரத்தை வழங்கவும்

எப்போதும் எளிதில் படிக்கக்கூடிய எழுத்துருவை வழங்கவும். கூடுதலாக, சரியான எழுத்துரு அளவு மற்றும் வரி உயரத்தைப் பயன்படுத்தவும். உரையின் அளவை உலாவி அமைப்புகளில் பயனர் அளவிட அனுமதிக்க, எழுத்துரு அளவுக்கு தொடர்புடைய அலகுகளை (rem போன்றவை) பயன்படுத்தவும்.

body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

body {
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  font-variant: small-caps;
  line-height: 90%;
}

3. காணக்கூடிய கவனம் காட்டிகளைக் கொண்டிருக்கவும்

ஊடாடும் உறுப்புகளுக்கு (இணைப்புகள், பொத்தான்கள், உள்ளீட்டு புலங்கள் போன்றவை) தெளிவான காட்சி கவனம் பாணியைக் கொண்டிருக்க உறுதி செய்ய எப்போதும் :focus போலி-வகுப்பைப் பயன்படுத்தவும்.

:focus ஐப் பயன்படுத்துவது விசைப்பலகை பயனர்களுக்கும் திரை வாசிப்பாளர்களுக்கும் தற்போது எந்த உறுப்பு செயலில் உள்ளது என்பதைப் புரிந்துகொள்ள உதவும்.

a:focus, button:focus, input:focus {
  outline: 2px solid orange;
}

4. கவனத்தை மறைப்பதைத் தவிர்க்கவும்

மற்றொரு காணக்கூடிய கவனம் பாணியுடன் மாற்றாமல், இயல்புநிலை கவனம் வரைதலை ஒருபோதும் அகற்ற வேண்டாம்.

button:focus {
  outline: none;
}

button:focus {
  outline: 2px solid orange;
}

5. CSS + அர்த்தமுள்ள HTML ஐப் பயன்படுத்தவும்

காட்சி ஸ்டைலிங்கிற்கு CSS ஐப் பயன்படுத்தவும், மற்றும் அர்த்தமுள்ள HTML உறுப்புகளுடன் உள்ளடக்கத்தை கட்டமைக்கவும் (எல்லாவற்றிற்கும் <div> போன்ற அர்த்தமற்ற உறுப்புகளுக்குப் பதிலாக).

nav {
  background-color: #333333;
  color: white;
}

aside {
  background-color: #333333;
  color: white;
}

6. பயனர் விருப்பங்களை மதிக்கவும்

CSS prefers-reduced-motion @media அம்சம், ஒரு பயனர் அனிமேஷன்கள் அல்லது மாற்றங்கள் போன்ற இயக்கத்தைக் குறைக்கக் கோரியுள்ளாரா என்பதைச் சரிபார்க்க உங்களை அனுமதிக்கிறது.

சில பயனர்களுக்கு இயக்க உணர்திறன் உள்ளது மற்றும் குறைந்த அனிமேஷன் கொண்ட வலைத்தளங்களை விரும்புகின்றனர். அவர்களின் கணினியில் இந்த அமைப்பை செயல்படுத்திய பயனர்களுக்கான அனிமேஷன்கள் மற்றும் மாற்றங்களை அணைக்க அல்லது குறைக்க இந்த ஊடக வினவலைப் பயன்படுத்தலாம்:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

சுருக்கம்

CSS அணுகல்தன்மை பயிற்சி

CSS அணுகல்தன்மை ஸ்டைலிங் முக்கியக் கருத்துகளைப் புரிந்துகொள்வதை இந்தப் பயிற்சி சோதிக்கும்.